<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        body > img {
            width: 50%;
            height: 50%;

        }

        #b_div {
            width: 100%;
            background-color: #e8e8e8;
            position: relative;
            height: auto;
            min-height: 100vh;
            border: 1px solid red;
        }

        #b_f_div {
            background-color: #e8e8e8;
            position: relative;
            height: auto;
            min-height: 100vh;
            border: 1px solid red;
        }

        #b_q_div {
            background-color: #e8e8e8;
            position: relative;
            height: auto;
            min-height: 100vh;
            border: 1px solid red;
        }

        #b_b_div {
            background-color: #e8e8e8;
            position: relative;
            height: auto;
            min-height: 100vh;
            border: 1px solid red;

        }

        /*#b_y_div {*/
        /*    background-color: #e8e8e8;*/
        /*    position: relative;*/
        /*    height: auto;*/
        /*    min-height: 100vh;*/
        /*    border: 1px solid red;*/
        /*}*/

        /*设置轮播图*/
        .slideshow-container {
            position: relative;
            text-align: center;
            width: 100%;
            height: 1000px; /* 设置轮播图容器的高度 */
            overflow: hidden;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* 默认隐藏所有幻灯片 */
            transition: opacity 1s ease; /* 设置渐变效果的过渡时间和缓动函数 */
        }

        /*.slide.active {*/
        /*    opacity: 1; !* 显示当前幻灯片 *!*/
        /*}*/

        /* 设置幻灯片切换动画 */
        @keyframes slideshow {
            0% {
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            33.33% {
                opacity: 1;
            }
            53.33% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

        /* 为每个幻灯片设置不同的动画延迟时间 */
        .slide:nth-child(1) {
            animation: slideshow 10s infinite;
        }

        .slide:nth-child(2) {
            animation: slideshow 10s infinite 3.33s;
        }

        .slide:nth-child(3) {
            animation: slideshow 10s infinite 6.66s;
        }

        .slide img {
            width: 50%;
            height: 50%;
            object-fit: contain; /* 使用 contain 进行按比例放大缩小 */
        }

        #b_y_div {
            position: relative;
        }

        #b_y_div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #b_div_title {
            padding-top: 100px;
        }

        .slide {
            padding-top: 150px;
        }

    </style>
</head>
<body>
<div id="b_div">
    <div id="b_f_div"></div>
    <!--    <div id="b_n_div"></div>-->
    <div id="b_q_div"></div>
    <div id="b_b_div"></div>
    <div id="b_y_div">
        <img id="b_div_title" src="../bh_img/游戏特色.png" alt="ts">
        <div class="slideshow-container">
            <div class="slide">
                <img src="../bh_img/特色1.webp" alt="Image 1">
            </div>
            <div class="slide">
                <img src="../bh_img/特色2.webp" alt="Image 2">
            </div>
            <div class="slide">
                <img src="../bh_img/特色3.webp" alt="Image 3">
            </div>
        </div>
    </div>
</div>

</body>
</html>